import {useState, memo, useCallback} from 'react'; // 导入需要的hooks
import {View, Button, Text} from 'react-native';
export default function App() {
  const [num, setNum] = useState(0);

  // 这个函数 在父组件重新渲染、更新的时候    生成！！！
  const cb = useCallback(() => {
    console.log('父组件的代码');
  }, []); // 依赖项发生改变，

  return (
    <View>
      <Button title={num.toString()} onPress={() => setNum(num + 1)} />
      {/* 
        向memo包装的子组件传递记忆化的回调函数
        因为cb是记忆化的（不会重新创建），所以子组件不会重新渲染
      */}

      {/* 父组件传递给子组件属性，如果更新，  子组件重新创建 */}
      <MemoSOn cb={cb} />
    </View>
  );
}

const Son = ({cb}: {cb: () => void}) => {
  console.log('son 创建');

  return (
    <View>
      {/* 使用从父组件传递的回调函数 */}
      <Button title="cb" onPress={cb} />
      <Text>Son </Text>
    </View>
  );
};

// 使用memo包装子组件
const MemoSOn = memo(Son);
